<template>
  <div class="ZwlZj">
    <div class="header">
      <div class="header-bd">
        <img src="@/assets/images/index/logos.png" alt />
        <router-link :to="{ name: 'Search', query: { url: 'index' } }">
          <span>
            <van-icon name="search" />寻找宝贝店铺
          </span>
        </router-link>
      </div>
    </div>
    <div class="banner">
      <van-swipe class="my-swipe" :height="120" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <router-link :to="{ path: '/list' }">
            <img :src="item" alt />
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <div class="nav-box">
        <ul>
          <li v-for="(item, index) in navbox" :key="index">
            <img :src="item.img" alt />
            <p v-html="item.title"></p>
          </li>
        </ul>
      </div>
    </div>
    <div class="tpl-wrapper">
      <div class="wrapper-box">
        <router-link :to="{ path: '/list' }">
          <ul>
            <li v-for="(item, index) in ju" :key="index">
              <h2>
                <img :src="item.title" alt />
              </h2>
              <h3 v-text="item.mintitle"></h3>
              <div>
                <img :src="item.img1" alt />
                <img :src="item.img2" alt />
              </div>
            </li>
          </ul>
        </router-link>
        <div class="taobaoHeadlines">
          <img src="@/assets/images/index/title8.png" alt />
          <div>
            <van-notice-bar left-icon="volume-o" :scrollable="false">
              <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                <van-swipe-item>今天有大事件</van-swipe-item>
                <van-swipe-item>明天有大事件</van-swipe-item>
                <van-swipe-item>后天有大事件</van-swipe-item>
              </van-swipe>
            </van-notice-bar>
          </div>
        </div>
      </div>
    </div>
    <div class="recommend">
      <div class="recommend-container">
        <div class="youLike">
          <img :src="youLike" alt />
        </div>
        <ul>
          <li v-for="(item, index) in goodslist" :key="index">
            <router-link :to="{ name: 'listdetailed', query: { id: item.goodsId } }">
              <img :src="JSON.parse(item.bannerImg)[0]" alt />
              <p>{{ item.title }}</p>
              <p>
                <span>￥{{ item.price }}</span>
                <em>{{ item.goodComments }}已购买</em>
              </p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import indexApi from "@/api/indexApi";
export default {
  data() {
    return {
      //商品列表
      goodslist: [],
      banner: [
        require("@/assets/images/index/branch1.jpg"),
        require("@/assets/images/index/branch2.jpg"),
        require("@/assets/images/index/branch3.jpg"),
        require("@/assets/images/index/branch4.jpg"),
        require("@/assets/images/index/branch5.jpg"),
        require("@/assets/images/index/branch6.jpg"),
        require("@/assets/images/index/branch7.jpg"),
        require("@/assets/images/index/branch8.jpg")
      ],
      navbox: [
        {
          img: require("@/assets/images/index/nav1.png"),
          title: "天猫新品"
        },
        {
          img: require("@/assets/images/index/nav2.png"),
          title: "今日爆款"
        },
        {
          img: require("@/assets/images/index/nav3.png"),
          title: "天猫国际"
        },
        {
          img: require("@/assets/images/index/nav4.png"),
          title: "饿了么"
        },
        {
          img: require("@/assets/images/index/nav5.png"),
          title: "天猫超市"
        },
        {
          img: require("@/assets/images/index/nav6.png"),
          title: "分类"
        },
        {
          img: require("@/assets/images/index/nav7.png"),
          title: "天猫美食"
        },
        {
          img: require("@/assets/images/index/nav8.png"),
          title: "阿里健康"
        },
        {
          img: require("@/assets/images/index/nav9.png"),
          title: "口碑生活"
        },
        {
          img: require("@/assets/images/index/nav10.png"),
          title: "充值中心"
        },
        {
          img: require("@/assets/images/index/nav11.png"),
          title: "机票酒店"
        },
        {
          img: require("@/assets/images/index/nav12.png"),
          title: "金币庄园"
        },
        {
          img: require("@/assets/images/index/nav13.png"),
          title: "阿里拍卖"
        },
        {
          img: require("@/assets/images/index/nav14.png"),
          title: "淘宝吃货"
        },
        {
          img: require("@/assets/images/index/nav15.png"),
          title: "闲鱼"
        },
        {
          img: require("@/assets/images/index/nav16.png"),
          title: "会员中心"
        },
        {
          img: require("@/assets/images/index/nav17.png"),
          title: "造点新货"
        },
        {
          img: require("@/assets/images/index/nav18.png"),
          title: "土货鲜食"
        }
      ],
      ju: [
        {
          title: require("@/assets/images/index/title1.png"),
          mintitle: "品牌折扣",
          img1: require("@/assets/images/index/e1.webp"),
          img2: require("@/assets/images/index/e2.webp")
        },
        {
          title: require("@/assets/images/index/title7.png"),
          mintitle: "限时半价",
          img1: require("@/assets/images/index/e3.webp"),
          img2: require("@/assets/images/index/e4.webp")
        },
        {
          title: require("@/assets/images/index/title6.png"),
          mintitle: "挖深藏的店",
          img1: require("@/assets/images/index/e5.webp"),
          img2: require("@/assets/images/index/e6.webp")
        },
        {
          title: require("@/assets/images/index/title2.png"),
          mintitle: "解锁夏日王炸",
          img1: require("@/assets/images/index/e7.webp"),
          img2: require("@/assets/images/index/e8.webp")
        },
        {
          title: require("@/assets/images/index/title5.png"),
          mintitle: "神物大赏推选",
          img1: require("@/assets/images/index/e9.webp"),
          img2: require("@/assets/images/index/e10.webp")
        },
        {
          title: require("@/assets/images/index/title7.png"),
          mintitle: "粉丝都爱看",
          img1: require("@/assets/images/index/e11.webp"),
          img2: require("@/assets/images/index/e12.webp")
        }
      ],
      youLike: require("@/assets/images/index/like.png")
    };
  },

  components: {},

  methods: {
    async getlist() {
      try {
        let p = await indexApi.getallgoods();
        this.goodslist = p.data.data;
      } catch (err) {
        console.log(err);
      }
    }
  },
  created() {
    this.getlist();
  }
};
</script>

<style scoped lang="scss">
.ZwlZj {
  min-height: 100%;
  background-color: rgb(244, 244, 244);
}
.header {
  width: 100%;
  height: 37px;
  background-color: rgb(255, 133, 42);
  position: fixed;
  top: 0px;
  z-index: 1;
  .header-bd {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    img {
      width: 27px;
      height: 20px;
      margin: 8px 9px 0;
    }
    a {
      display: block;
      flex: 1;
      height: 25px;
      margin-right: 10px;
      margin-top: 6px;
      border-radius: 4px;
      background-color: rgb(255, 78, 34);
      text-align: center;
      line-height: 25px;
      color: rgb(240, 224, 220);

      .van-icon {
        font-size: 20px;
        vertical-align: middle;
      }
    }
  }
}

//轮播
.banner {
  height: 120px;
  margin-top: 37px;
  .my-swipe {
    height: 120px;
    transform: translateZ(0);
    .van-swipe-item {
      text-align: center;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;

      //transform: translateZ(0);

      img {
        display: block;
        width: 100%;
        height: 120px;
      }
    }
  }
}
//nav
.nav {
  width: 100%;
  height: 156px;
  overflow: auto;
  background-color: rgb(255, 255, 255);
  .nav-box {
    width: 690px;
    ul {
      display: flex;
      flex-wrap: wrap;
      height: 156px;
      align-items: flex-start;
      li {
        width: 60px;
        height: 60px;
        margin: 0 8px;
        font-size: 12px;
        text-align: center;
        img {
          width: 100%;
        }
      }
    }
  }
}
//多个商品
.tpl-wrapper {
  margin-top: 10px;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .wrapper-box {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    ul {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      li {
        width: 50%;
        h2 {
          margin-top: 10px;
          height: 20px;
          overflow: hidden;
          img {
            display: block;
            height: 100%;
          }
        }
        h3 {
          font-size: 14px;
          font-weight: 800px;
          color: #ff6b51;
          margin-left: 10px;
        }
        div {
          display: flex;
          justify-content: space-around;
          img {
            width: 70px;
            height: 88px;
          }
        }
      }
    }
    .taobaoHeadlines {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img {
        display: block;
        height: 24px;
      }
      div {
        flex: 1;
        .van-notice-bar {
          background-color: #fff;
        }
      }
    }
  }
}
//
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
//猜你喜欢列表
.recommend {
  padding: 8px;
  .recommend-container {
    width: 100%;
    .youLike {
      height: 23px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      img {
        width: 161px;
        height: 19px;
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        box-sizing: border-box;
        background-color: #fff;
        width: 49%;
        margin-top: 8px;
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 170px;
          display: block;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 14px;
          margin: 10px 0;
          span {
            color: #ff6b51;
          }
          em {
            margin-left: 5px;
            color: rgb(168, 168, 168);
          }
        }
      }
    }
  }
}
</style>
